<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单事件</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        input{
            width: 200px;
            height: 50px;
            background-color: #ccc;
            border: 2px solid black;
            font-size: 20px;
            margin-left: 100px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <form action="" id="registerFrom">
        <input type="text" id="username" name="" value="">
        <!-- 清空表单里面的内容 -->
        <input type="reset" value="重置">
        <input type="submit" value="提交">
    </form>
    <script>
        let inputUserName = document.querySelector('#username')
            oFormRegister = document.querySelector('#registerFrom')
        //获取焦点时触发
        inputUserName.onfocus = function(){
            console.log("获取焦点时触发");
        }
        //失去焦点时触发
        inputUserName.onblur = function(){
            console.log("失去焦点时触发");
        }
        //失去焦点后(内容value改变时)，比较内容与上次比是否有变化，有就触发事件
        inputUserName.onchange = function(){
            console.log("发生改变");
        }
        //表单重置后触发
        oFormRegister.onreset = function(){
            console.log("重置");
        }
        //表单提交数据时触发
        oFormRegister.onsubmit = function(){
            //通常将表单数据提交到后端之前，需要预处理(校验)
            console.log("提交");
        }

        //事件函数内的this，指向它挂载的函数节点
    </script>
</body>
</html>